今回は縦長の画像、横長の画像、小さい画像、大きい画像などバラバラでデバイスの幅が変わってもアスペクト比（縦横比）を保ったままリサイズする方法を紹介します。
この方法であれば画像がはみ出たりせず要素のに対して縦横比を維持したまま表示することができます。
アスペクト比（縦横比）htmlcssサンプル アスペクト比（縦横比）htmlまず確認のために縦長の画像、横長の画像、小さい画像、大きい画像を用意します。
cssul{display: flex;flex-wrap: wrap;justify-content: space-between;padding: 10px 15px 10px 0;}li {width: calc((100%) / 2);padding-left: 15px;margin-bottom: 20px;vertical-align: top;box-sizing: border-box;}figure {background: #fff;min-width: auto;min-height: auto;position: relative;width: 100%;padding-bottom: 100%;display: flex;justify-content: center;align-items: center;border: solid 1px #eee;}figure img {max-width: 100%;max-height: 100%;width: auto;height: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;object-fit: contain;}サンプルサンプルはこちら